<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>

<!doctype html>
<html>

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>会员登录</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
        type="text/css"/>
  <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"
          type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js"
          type="text/javascript"></script>
  <!-- 引入自定义css文件 style.css -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

  <style>
    body {
      margin-top: 20px;
      margin: 0 auto;
    }

    .carousel-inner .item img {
      width: 100%;
      height: 300px;
    }

    ul {
      list-style-type: none;
    }

    a:hover {
      text-decoration: none; /*超链接无下划线*/
    }

    button {
      text-decoration: none;
    }
  </style>
</head>

<body>


<jsp:include page="head.jsp"/>


<div class="container">
  <div class="row">
    <div style="border: 1px solid #e4e4e4;width:930px;margin-bottom:10px;margin:0 auto;padding:10px;margin-bottom:10px;">
      <a href="${pageContext.request.contextPath}/index.do">首页</a>&nbsp;&nbsp;&gt;
      <a href="${pageContext.request.contextPath}/product/list.do?cid=${product.category.cid}">${product.category.cname}</a>&nbsp;&nbsp;&gt;
      <a href="javascript:;">${product.name}</a>
    </div>

    <div style="margin:0 auto;width:950px;">
      <div class="col-md-6">
        <img style="opacity: 1;width:400px;height:350px;" title="" class="medium"
             src="${pageContext.request.contextPath}/${product.image}">

        <div style="margin-left: 60px;margin-top: 10px">
          <c:if test="${collect == 0}">
            <a href="Javascript:;" onclick="updatecollect()" class="btn-default collect"
               style="color: grey"><img src="/img/star_v1.png" alt="">收藏商品</a>
          </c:if>
          <c:if test="${collect == 1}">
            <a href="Javascript:;" onclick="updatecollect()" class="btn-default collect"
               style="color: red"><img src="/img/star_v2.png" alt="">取消收藏</a>
          </c:if>
        </div>
      </div>

    </div>

    <div class="col-md-6">
      <div><strong>${product.name}</strong></div>
      <div style="border-bottom: 1px dotted #dddddd;width:350px;margin:10px 0 10px 0;">
        <div style="display: inline-block">编号：${product.pid}</div>
        <div style="color: grey;display: inline-block">库存：${product.inventory}</div>
      </div>

      <div style="margin:10px 0 10px 0;">优惠价: <strong
              style="color:#ef0101;">￥：${product.shopPrice}元 </strong>
        原价：
        <del>${product.marketPrice}元</del>
      </div>

      <%--<div style="margin:10px 0 10px 0;">促销: <a target="_blank" title="限时抢购 (2014-07-30 ~ 2015-01-01)"--%>
      <%--style="background-color: #f07373;">限时抢购中</a></div>--%>


      <div style="padding:10px;border:1px solid #e7dbb1;width:430px;margin:15px 0 10px 0;;background-color: #fffee6;">
        <input value="${product.pid}" id="pid" name="pid" hidden="true">

        <ul class="种类" style="padding: 0px">
          <li class="zhonglei">
            <a href="javascript:;" class="flag hq_hy" role="button" tabindex="0" onclick="dj(this);"
               style="margin:5px 0 10px 0;padding: 5px 10px;width: 60px;height: 30px;border: solid 1px;text-align: center;vertical-align: middle;background-color: white">
              标准
            </a>
          </li>
        </ul>

        <div style="border-bottom: 1px solid #faeac7;margin-top:20px;padding-right: 10px;">购买数量:
          <input id="quantity" name="count" value="1" maxlength="4" size="10" type="text"></div>

        <div style="margin:20px 0 10px 0;;text-align: center;">
          <c:if test="${product.inventory == 0}">
            <%--onclick="noinventory()"--%>
            <a href="javascript:;" ><img
                    src="${pageContext.request.contextPath}/images/ljgm.png"></a><%--立即购买--%>

            <%--<input style="background: url('/images/jrgwc.png');width: 182px;height: 40px;margin-left: 20px" value=""--%>
            <%--type="submit">--%>
            <a href="javascript:;" style="margin-left: 15px"><img
                    src="${pageContext.request.contextPath}/images/jrgwc.png"></a>
          </c:if>
          <c:if test="${product.inventory  > 0}">
            <a href="javascript:;" onclick="createorder()"><img
                    src="${pageContext.request.contextPath}/images/ljgm.png"></a><%--立即购买--%>

            <%--<input style="background: url('/images/jrgwc.png');width: 182px;height: 40px;margin-left: 20px" value=""--%>
            <%--type="submit">--%>
            <a href="javascript:;" onclick="add2cart()" style="margin-left: 15px"><img
                    src="${pageContext.request.contextPath}/images/jrgwc.png"></a>
          </c:if>
        </div>
      </div>

    </div>
  </div>
  <div class="clear"></div>

  <%--商品参数--%>
  <div style="width:950px;margin:0 auto;">

    <div style="background-color:#d3d3d3;width:930px;padding:10px 10px;margin:10px 0 10px 0;">
      <strong>商品参数</strong>
    </div>

    <div style="margin-top:10px;width:900px;">
      <table class="table table-bordered">
        <tbody>
        <tr class="active">
          <th colspan="2">基本参数</th>
        </tr>
        <tr>
          <th width="10%">机型</th>
          <td width="30%">${product.desc}</td>
        </tr>
        <tr>
          <th width="10%">级别</th>
          <td width="30%">标准</td>
        </tr>
        <tr>
          <th width="10%">标重</th>
          <td>500g</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div style="background-color:#d3d3d3;width:900px;">
      <table class="table table-bordered">
        <tbody>
        <tr class="active">
          <th><strong>商品评论</strong></th>
        </tr>
        <tr class="warning">
          <th>暂无商品评论信息 <a>[发表商品评论]</a></th>
        </tr>
        </tbody>
      </table>
    </div>

    <div style="background-color:#d3d3d3;width:900px;">
      <table class="table table-bordered">
        <tbody>
        <tr class="active">
          <th><strong>商品咨询</strong></th>
        </tr>
        <tr class="warning">
          <th>暂无商品咨询信息 <a>[发表商品咨询]</a></th>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>
</div>

<jsp:include page="foot.jsp"/>

</body>

<script>
  function add2cart() {
    $.ajax({
      url: "${pageContext.request.contextPath}/car/add2cart.do",
      type: "post",
      data: {
        pid: $("#pid").val(),
        count: $("#quantity").val()
      },
      success: function (d) {
        if (d.status == 1) {
          location.href = "${pageContext.request.contextPath}/user/gotomsg.do?msg=" + d.data.msg
              + "&address=" + d.data.address;
        }
        if (d.status == 0) {

          var windowWidth = $(window).width();
          var tipsDiv = '<div class="tipsClass">正在前往购物车</div>';
          $('body').append(tipsDiv);
          $('div.tipsClass').css({
            'top': 130 + 'px',
            'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
            'position': 'absolute',
            'padding': '10px 16px',
            'background': '#8FBC8F',
            'font-size': 18 + 'px',
            'margin': '0 auto',
            'text-align': 'center',
            'width': '350px',
            'height': 'auto',
            'color': '#fff',
            'opacity': '0.8'
          }).show();
          setTimeout(
              function () {
                $('div.tipsClass').fadeOut();
              }, (1 * 1000));

          var c = 1;
          window.setInterval(function () {
            c--;
            if (c == 0) {
              location.href = "${pageContext.request.contextPath}/car/showcar.do";
            }
          }, 1000);

        }
      }
    })
  }

  function createorder() {
    $.ajax({
      url: "${pageContext.request.contextPath}/order/createOrder.do",
      type: "post",
      data: {
        pid:${product.pid},
        count: $("#quantity").val()
      },
      success: function (d) {
        if (d.status == 0) {
          location.href="${pageContext.request.contextPath}/order/gotoOrderInfo.do";
        }
        if (d.status == 1) {
          noinventory();
        }
      }
    })
  }

  function noinventory() {
    var windowWidth = $(window).width();
    var tipsDiv = '<div class="tipsClass">库存不足</div>';
    $('body').append(tipsDiv);
    $('div.tipsClass').css({
      'top': 130 + 'px',
      'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
      'position': 'absolute',
      'padding': '10px 16px',
      'background': 'red',
      'font-size': 18 + 'px',
      'margin': '0 auto',
      'text-align': 'center',
      'width': '350px',
      'height': 'auto',
      'color': '#fff',
      'opacity': '0.8'
    }).show();
    setTimeout(
        function () {
          $('div.tipsClass').fadeOut();
        }, (1.5 * 1000));
  }

  function updatecollect() {
    $.ajax({
      url: "${pageContext.request.contextPath}/product/updateCollect.do",
      type: "post",
      data: {
        pid:${product.pid}
      },
      success: function (d) {
        if (d.status == 1) {
          location.href = "${pageContext.request.contextPath}/user/gotomsg.do?msg=" + d.data.msg
              + "&address=" + d.data.address;
        }
        if (d.status == 0) {

          if (d.data == 1) {
            var windowWidth = $(window).width();
            var tipsDiv = '<div class="tipsClass">收藏商品成功</div>';
            $('body').append(tipsDiv);
            $('div.tipsClass').css({
              'top': 130 + 'px',
              'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
              'position': 'absolute',
              'padding': '10px 16px',
              'background': 'grey',
              'font-size': 18 + 'px',
              'margin': '0 auto',
              'text-align': 'center',
              'width': '350px',
              'height': 'auto',
              'color': 'white',
              'opacity': '0.8'
            }).show();
            setTimeout(
                function () {
                  $('div.tipsClass').fadeOut();
                  $(".collect").html("<img src=\"/img/star_v2.png\" alt=\"\">取消收藏");
                  $(".collect").css("color", "red");
                }, (1 * 1000));
          }
          if (d.data == 0) {
            var windowWidth = $(window).width();
            var tipsDiv = '<div class="tipsClass">已取消收藏</div>';
            $('body').append(tipsDiv);
            $('div.tipsClass').css({
              'top': 130 + 'px',
              'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
              'position': 'absolute',
              'padding': '10px 16px',
              'background': 'grey',
              'font-size': 18 + 'px',
              'margin': '0 auto',
              'text-align': 'center',
              'width': '350px',
              'height': 'auto',
              'color': 'white',
              'opacity': '0.8'
            }).show();
            setTimeout(
                function () {
                  $('div.tipsClass').fadeOut();
                  $(".collect").html("<img src=\"/img/star_v1.png\" alt=\"\">收藏商品");
                  $(".collect").css("color", "grey");
                }, (1 * 1000));

          }
        }

      }
    })
  }
</script>
</html>